<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span onclick="show()">我要发帖</span></header>
    <section>
        <!-- 帖子列表 -->
        <ul>
            <!-- 写一个假帖子 -->
            <li>
                <div>
                    <img src="./images/tou01.jpg" alt="">
                </div>
                <h1>如何学习web前端课程</h1>
                <p>板块:新课来了
                    <span>发表时间:2024-04-23</span>
                </p>
            </li>
            <li>
                <div>
                    <img src="./images/tou01.jpg" alt="">
                </div>
                <h1>如何学习web前端课程</h1>
                <p>板块:新课来了
                    <span>发表时间:2024-04-23</span>
                </p>
            </li>
        </ul>
    </section>
    <!-- 发帖的框 -->
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" onclick="publish()" value="发布">
    </div>
</div>
<script>
    function show(){
        // css dom
        document.getElementsByClassName("post")[0].style.display = "block";

        // 清空弹框所填内容
        document.getElementsByClassName("title")[0].value = "";
        document.getElementsByTagName("select")[0].value = -1; // select
        document.getElementsByClassName("content")[0].value = "";
    }

    // 定义头像数组
    var arr = new Array();
    arr[0] = 'tou01.jpg';
    arr[1] = 'tou02.jpg';
    arr[2] = 'tou03.jpg';
    arr[3] = 'tou04.jpg';

    function publish(){
        // 头像处理
        // 随机头像
        var index = Math.floor(Math.random()*4);  // 0-1   0-3
        //console.log(index);

        // 创建图片节点
        var el_img = document.createElement("img");
        // 给节点绑定src属性值
        el_img.setAttribute("src","./images/"+arr[index]);

        // 创建div节点
        var el_div = document.createElement("div");

        // 将图片节点插入div中
        el_div.appendChild(el_img);


        // 获取帖子标题
        var title = document.getElementsByClassName("title")[0].value;
        // 创建标题节点
        var el_h1 = document.createElement("h1");
        el_h1.innerHTML = title;


        // 创建span节点
        var el_span = document.createElement("span");
        // 系统时间
        var date = new Date();
        el_span.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;发表时间:"+date.toLocaleString(); // 日期格式化
        // 创建p节点
        var el_p = document.createElement("p");
        // 获取下拉列表中的选择项
        var choice = document.getElementsByTagName("select")[0].value;
        el_p.innerHTML = "板块:"+choice;
        el_p.appendChild(el_span);
        


        // 创建li节点
        var el_li = document.createElement("li");
        // 将div节点追加到li中
        el_li.appendChild(el_div);
        // 将h1节点追加到li中
        el_li.appendChild(el_h1);
        // 将p节点追加到li中
        el_li.appendChild(el_p)



        
        // 将li节点追加到ul中
        var el_ul = document.getElementsByTagName("ul")[0];
        //el_ul.appendChild(el_li);

        // 最新的帖子显示在最上面  insertBefore(A,B)   B代表当前容器中第一个元素
        var el_li_first = el_ul.firstElementChild;
        el_ul.insertBefore(el_li,el_li_first);





        // 关闭发帖窗口
        document.getElementsByClassName("post")[0].style.display = "none";
    }
</script>
</body>
</html>